<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple">
                    <el-tabs v-model="activeName" type="card">
                        <el-tab-pane label="组织资源" name="first">
                            <el-tree
                                    :data="tagsList"
                                    :props="props"
                                    :load="loadNode"
                                    lazy
                                    check-strictly
                                    highlight-current
                                    show-checkbox
                                    node-key="id"
                                    ref="tree"
                                    @check-change="treeChange"
                                    @node-expand="handleNodeClick"
                                    @node-click="handleNodeClick">
                            </el-tree>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-col>
            <el-col :span="18">
                <el-select v-model="value" placeholder="请选择">
                    <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                    </el-option>
                </el-select>
                <div style="margin-bottom: 10px;float: right;width: 20%;">
                    <el-input placeholder="请输入内容" v-model="input2">
                        <el-button slot="append" icon="el-icon-search" style="border: 1px solid #409EFF;background-color: #409EFF;color: #fff;"></el-button>
                    </el-input>
                </div>
                <div class="grid-content bg-purple">
                    <div class="radio-select-style" v-if="selectTagStr==1">
                        <template>
                            <el-table stripe :data="tableData"
                                      ref="multipleTable"
                                      @row-click="handleSelectionChangeRow"
                                      border style="width: 100%">
                                <el-table-column type="selection" width="55" disabled="true"></el-table-column>
                                <el-table-column prop="deviceLocation" label="设备位置"></el-table-column>
                                <el-table-column prop="deviceName" label="设备名称"></el-table-column>
                                <el-table-column prop="deviceCode" label="设备编号"></el-table-column>
                            </el-table>
                            <div class="pagination">
                                <el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="page_total" :page-size="page_size"></el-pagination>
                            </div>
                        </template>
                    </div>
                   <div v-if="selectTagStr!=1">
                       <template>
                           <el-table stripe border ref="multipleTableData" :data="tableData" tooltip-effect="dark"
                                     style="width: 100%"
                                     @selection-change="handleSelectionChange">
                               <el-table-column type="selection" width="55"></el-table-column>
                               <el-table-column prop="deviceLocation" label="设备位置"></el-table-column>
                               <el-table-column prop="deviceName" label="设备名称"></el-table-column>
                               <el-table-column prop="deviceCode" label="设备编号"></el-table-column>
                           </el-table>
                       </template>
                   </div>

                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
    import {regionalRoot,getSubOrgList,getDeviceMonitorList,getDeviceAndEnergyType} from  '../../../api/index';
    import bus from '../../common/bus';
    export default {
        name: "select-device-mask",
        data(){
            return {
                activeName:'first',
                options: [],
                deviceType: '',
                tableData: [],
                tagsList:[],
                demoData:'',
                clickedId:'',
                lazyInitData:[],
                lazyNode:null,
                lazyResolve:null,
                clickNode:null,
                clikData:null,
                props: {
                    label: 'orgName',
                    children: 'zones',
                    isLeaf: 'leaf'
                },
                connectErrTxt:'',
                dialogTableVisible:false,
                value1:'',
                cur_page:1,
                page_size:15,
                page_total:1,
                curr_id:"",
                setTimer:null,
                checked:false,
                typeId:'',

                selectTagStr:1,
                selectedEneryTypeVal:'',

                input2:'',
                value:'',
            }
        },
        beforeCreate(){
        },
        created(){
            this.getData();
            bus.$on('selectTagStr',(val)=>{
                this.selectTagStr = val;
            })
            bus.$on('selectedEneryTypeVal',(val)=>{
                this.selectedEneryTypeVal = val;
            })
        },
        beforeDestroy(){
            // bus.$off('markSelectedMoreData')
            // bus.$off('markSelectedData')
        },
        methods:{
            loadNode(node, resolve) {
                this.lazyNode = node;
                this.lazyResolve = resolve;
                if (node.level === 0) {
                    return resolve(this.tagsList);
                }
                // if (node.level > 1) return resolve([]);

                setTimeout(() => {
                    console.log(this.clickedId)
                    getSubOrgList({
                        pid:this.clickedId
                    }).then((res)=>{
                        console.log(res)
                        this.lazyInitData = res.datas;

                        resolve(this.lazyInitData);
                    })


                }, 500);
            },
            //获取数据
            getData(){
                regionalRoot({

                }).then((res) =>{
                    // console.log(res)
                    var dataArr = new Array();
                    dataArr[0] = res.expandData.root;
                    dataArr[0]['children'] = res.expandData.childrens;
                    this.tagsList = dataArr;
                    this.clickedId = this.tagsList[0].id;
                    // console.log(dataArr)
                })
            },
            //获取树的子节点
            getSubOrgList(){
                console.log(this.clickedId)
                getSubOrgList({
                    pid:this.clickedId
                }).then((res)=>{
                    console.log(res)
                    this.lazyInitData = res.datas;
                })
            },
            //获取设备列表
            getDeviceMonitorList(oId){
                getDeviceMonitorList({
                    pageNum:this.cur_page,
                    pageSize:this.page_size,
                    orgId:oId,
                    typeId:this.typeId,
                }).then((res)=>{
                    console.log(res)
                    this.tableData = res.data.list;
                    this.page_total = res.data.total;
                })
            },
            // 分页导航
            handleCurrentChange(val) {
                this.cur_page = val;
                if(this.selectTagStr == 1){
                    this.getDeviceMonitorList(this.curr_id);
                }else{
                    this.getDeviceAndEnergyType(this.curr_id)
                }

            },
            //树的节点点击事件
            handleNodeClick(data,node) {
                this.clikData = data;
                this.clickNode = node;

                this.$refs.tree.setCheckedNodes([data]);

                if(data.pid === 0){
                    this.clickedId = data.id;
                    this.demoData = data;
                    this.demoData['pname'] = data.orgName;
                    return ;
                }
                this.clickedId = data.id;
                this.demoData = data;
                this.demoData['pname'] = node.parent.data.orgName;


            },
            //树复选框点击
            treeChange(data,node,val){
                // console.log(data)
                // console.log(node)
                // console.log(val)
                if(node){
                    this.$refs.tree.setCheckedNodes([data]);
                    this.curr_id = data.id;
                    this.cur_page = 1;
                    if(this.selectTagStr == 1){
                        this.getDeviceMonitorList(data.id);
                    }else{
                        this.getDeviceAndEnergyType(data.id)
                    }
                }else{
                    this.tableData = [];
                    this.page_total = 1;
                    if(this.curr_id==data.id){
                        this.curr_id = "";
                    }
                }


            },
            getDeviceAndEnergyType(oId){
                getDeviceAndEnergyType({
                    orgId:oId,
                    energyType:this.selectedEneryTypeVal,
                    pageNo:this.cur_page,
                    pageSize:this.page_size,
                }).then((res)=>{
                    this.tableData = res.data.list;
                    this.page_total = res.data.total;
                })
            },
            handleSelectionChange(val) {
                console.log(val)
                bus.$emit('markSelectedMoreData',val)

            },
            handleSelectionChangeRow(row, column, event){
                console.log(row)
                bus.$emit('markSelectedData',row)
                this.multipleSelection = [row];
                this.$refs.multipleTable.clearSelection();
                this.$refs.multipleTable.toggleRowSelection(row);
                // this.$refs.multipleTable.toggleRowSelection(row);



                // this.$refs.multipleTabel.clearSelection();
            },
        }
    }
</script>

<style scoped>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
        margin-left: 20px;
    }
    /deep/ .radio-select-style thead  .el-table-column--selection .cell{
        display: none;
    }
    /deep/ .radio-select-style tbody .el-table-column--selection .cell{
        pointer-events:none
    }
</style>